<template>
  <div class="app">
    <ul>
      <li><router-link to="/Foo">Foo</router-link></li>
      <li><router-link to="/Bar">Bar</router-link></li>
    </ul>
    <router-view></router-view>
    <div class="zzzz" v-for="item in list" :key="item">{{ item }}</div>
    <div ref="xxx" v-if="show">{{num}}</div>
    <button @click="(show = !show), num++">touch me</button>

    <!-- <wind :show=show @open="open" :list="list"> -->
    <!-- <template v-slot:title>标题</template>
    <template #html='obj'>我是内容 {{obj.phtml}}</template>
    <template #footer><button @click="show=false">取消</button><button>确认</button></template> -->
    <!-- <template #pic='obj'>{{obj.current+1 }}/{{list.length}}</template> -->
    <!-- </wind> -->
  </div>
</template>

<script>
export default {
  beforeCreate() {
    document.body.style.backgroundColor = "azure";
    console.log('数据初始化之前',this.num);

  },

  created() {
    // console.log(this.list);
    console.log('数据初始化之后',this.num);

  },

  beforeMount() {},

  mounted() {
    console.log('dom渲染之后',this.$refs.xxx.innerHTML);
  },

  beforeUpdate() {
    console.log('数据更新前',this.show);
  },

  updated() {
     console.log('数据更新',this.show);
  },

  beforeDestroy(){
    console.log('组件销毁前');
  },

  destroyed(){
    console.log('组件销毁后');

  },

  name: "App",
  data() {
    return {
      show: true,
      list: ["plum", "skyblue", "azure"],
      num: 100,
    };
  },
  methods: {
    open() {
      this.show = true;
    },
  },

  computed: {},
  components: {},
};
</script>

<style >
.router-link-active{
  background-color: rgb(164, 168, 171);
  color: rgb(211, 226, 239);
}
</style>